<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width,user-scale=1.0" name="viewport">
    <title>Dream</title>
    <link href="../img/doraemon.ico" rel="icon">
    <link href="../out/bootstrap4/css/bootstrap.min.css" rel="stylesheet">
    <link href="../out/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="../css/normal.css" rel="stylesheet">
    <link href="../css/header.css" rel="stylesheet">
    <script src="../out/bootstrap4/js/jquery-3.6.1.min.js">
    </script>
    <script src="../out/bootstrap4/js/bootstrap.bundle.min.js">
    </script>
</head>
<body>
<header>
    <div class="myNav container-fluid">
        <div class=" row ">
            <div class=" col-12 ">
                <nav class="navbar navbar-expand-sm navbar-dark">
                    <!--Brand-->
                    <a class="navbar-brand d-flex " href="../index.html">
                        <img alt="img" src="../img/doraemon_logo.png" style="width:3rem">
                        <span style="font-family:'方正少儿_GBK',serif;color:white;font-size:2rem;">哆啦A梦</span>
                    </a>
                    <!--Toggler/collapsibeButton-->
                    <button class="navbar-toggler" data-target="#collapsibleNavbar" data-toggle="collapse"
                            type="button">
				<span class="navbar-toggler-icon">
				</span>
                    </button>
                    <!--Navbarlinks-->

                    <div class="collapse navbar-collapse" id="collapsibleNavbar">
                        <ul class="navbar-nav w-100 justify-content-center align-items-end align-items-sm-center">
                            <li class="nav-item">
                                <a class=" nav-link p-1 " href="../index.html">首页</a>
                            </li>
                            <li class="nav-item">
                                <a class=" nav-link p-1 " href="recommend.html">推荐</a>
                            </li>
                            <li class="nav-item">
                                <a class=" nav-link p-1 " href="special.html">专题</a>
                            </li>
                            <li class="nav-item">
                                <a class=" nav-link p-1 " href="film.html">剧场版</a>
                            </li>
                            <li class="nav-item">
                                <a class=" nav-link p-1 active" href="#">视频</a>
                            </li>
                            <li class="nav-item">
                                <a class="d-block d-sm-none border login p-1 rounded nav-link "
                                   href="login.html">注册/登录</a>
                            </li>
                        </ul>
                    </div>
                    <a class="d-none d-sm-block border p-1 rounded nav-link login" href="login.html">注册/登录</a>
                </nav>
            </div>
        </div>
    </div>
</header>
<!-- slide -->
<div class="mySlide container-fluid">
    <div class="row">
        <div class="col-12 m-0 p-0">
            <img class="w-100" src="../img/doraemo_bg_1.jpg">
        </div>
    </div>
</div>
<!--content-->

<div class="myContent container" style="z-index:10">
    <div class=" row p-5">
        <div class=" col-12 justify-content-center d-flex ">
            <span class="font-weight-bold">精彩视频</span>
        </div>
        <div class="mt-2 mb-4 col-12 justify-content-center d-flex ">
            <span class="font-weight-bold text-primary">——</span>
        </div>
        <div class=" col-12 ">
            <div class=" pt-3 pb-3 row border-bottom align-items-center ">
                <div class=" col-12 videoCol justify-content-center align-items-center d-flex ">
                    <div class="videoBox">
                        <video class=" w-100 " poster="../img/poster.jpg" preload="metadata">
                            <source src="../video/video1.mp4" type="video/mp4"/>
                        </video>
                    </div>
                </div>
            </div>
            <div class=" pt-3 pb-3 row border-bottom align-items-center ">
                <div class=" col-12 videoCol justify-content-center align-items-center d-flex ">
                    <div class="videoBox">
                        <video class=" w-100 " poster="../img/poster.jpg" preload="metadata">
                            <source src="../video/video2.mp4" type="video/mp4"/>
                        </video>
                    </div>
                </div>
            </div>
            <div class=" pt-3 pb-3 row border-bottom align-items-center ">
                <div class=" col-12 videoCol justify-content-center align-items-center d-flex ">
                    <div class="videoBox">
                        <video class=" w-100 " poster="../img/poster.jpg" preload="metadata">
                            <source src="../video/video3.mp4" type="video/mp4"/>
                        </video>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--slogan-->

<div class=" container-fluid">
    <div class=" row ">
        <div class=" col-12 d-flex flex-column align-items-center ">
            <h6 style="font-family:站酷小薇LOGO体,sans-serif">&copy;哆啦A梦</h6>
            <p class="slogan" style="font-family:站酷小薇LOGO体,sans-serif">
                童年那个怕老鼠爱吃铜锣烧的蓝色机器猫 现在还有看吗?
            </p>
        </div>
    </div>
</div>
<footer class="m-0 p-0">
    <div class="container-fluid bg-dark p-3">
        <div class="row">
            <div class="col-12 col-lg-4 offset-lg-0 col-md-5 offset-md-0 col-sm-5 offset-sm-0 d-flex align-items-center justify-content-center justify-content-sm-start">
                <img alt="..."
                     src="../img/doraemon_logo.png"
                     style="width: 2rem">
                <span style="font-family: '方正少儿_GBK',serif;color: white;font-size: 1.5rem;">哆啦A梦</span>
            </div>
            <div class="col-12 col-lg-4 offset-lg-4 col-md-5 offset-md-2 col-sm-7 offset-sm-0 d-flex align-items-center justify-content-center justify-content-sm-end">
                <ul class="nav">
                    <li class="nav-item">
                        <a class="nav-link" href="#"><i class="fa fa-twitter bg-light p-2 rounded-circle text-dark"
                                                        style="font-size: 1.5rem"></i></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#"><i class="fa fa-weibo bg-light p-2 rounded-circle text-dark"
                                                        style="font-size: 1.5rem"></i></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#"><i class="fa fa-wechat bg-light p-2 rounded-circle text-dark"
                                                        style="font-size: 1.5rem"></i></a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</footer>
<script src="../js/normal.js"></script>
<script>
    var videos = null;
    window.onload = function () {

        videos = document.getElementsByTagName("video");
        for (let i = 0; i < videos.length; i++) {

            //判断左击还是右击
            $(videos[i]).mousedown(function (event) {
                if (event.button === 0) {
                    if (this.paused) {
                        for (let j = 0; j < videos.length; j++) {
                            if (j !== i) {
                                videos[j].pause();
                                videos[j].currentTime = 0;
                            }
                        }
                        this.play();
                    } else {
                        this.pause();
                    }
                } else if (event.button === 2) {
                    //鼠标按下
                    holdDown(this)
                }
            });
            console.log("状态", videos[i].readyState)

            switch (videos[i].readyState) {
                case 0:
                    console.error("HAVE_NOTHING");
                    videos[i].poster = "../img/doraemon.ico"
                    break;
                case 1:
                // console.info("HAVE_METADATA")
                // break;
                case 2:
                // console.warn("HAVE_CURRENT_DATA");
                // break;
                case 3:
                // console.info("HAVE_FUTURE_DATA");
                // break;
                case 4:
                    // console.log("HAVE_ENOUGH_DATA");
                    videos[i].duration = 10000;
                    videos[i].currentTime = 0;
                    break;
            }
            //菜单事件
            videos[i].addEventListener('contextmenu', function (e) {
                e.preventDefault();
            }, {passive: false});
            //手指按下
            videos[i].addEventListener("touchstart", function () {
                holdDown(this);
            }, {passive: true});
            //手指弹起
            videos[i].addEventListener("touchend", function () {
                holdUp(this);
            }, {passive: true});
            //鼠标弹起
            videos[i].addEventListener("mouseup", function () {
                holdUp(this);
            }, {passive: true});
        }
    }
    let timeStart, timeEnd, time, speed;
    speed = document.createElement("h6");
    speed.id = "speed";
    speed.innerText = "1x";
    speed.style.cssText = "position:absolute;top:0;background:black;color:white;filter:opacity(0.5);display:none";

    function getTimeNow() {
        let now = new Date();
        return now.getTime();
    }

    function holdDown(embed) {
        embed.parentNode.appendChild(speed);
        timeStart = getTimeNow();
        time = setInterval(function () {
            timeEnd = getTimeNow();
            if (timeEnd - timeStart > 700) {
                clearInterval(time);
                if (typeof videos != "undefined" && videos != null) {
                    for (let i = 0; i < videos.length; i++)
                        if (embed === videos[i]) {
                            if (videos[i].paused) {
                                for (let j = 0; j < videos.length; j++) {
                                    if (j !== i) {
                                        videos[j].pause();
                                        videos[j].currentTime = 0;
                                    }
                                }
                                videos[i].play();
                            }
                        } else {

                        }
                }
                embed.playbackRate = 2;
                speed.style.display = "block";
                speed.innerText = "2X";
            }
        }, 100);
    }

    function holdUp(embed) {
        clearInterval(time);
        embed.playbackRate = 1;
        speed.innerText = "1X";
        speed.style.display = "none";
    }
</script>
</body>
</html>